<template>
    <view class="shenhe">
        <uv-sticky :offset-top="offsetTop">
            <view class="shenheHeader flex flex-align">
                <view @click="changeTab(2)" :class="tabType==2?'flex-1 active':'flex-1'"> 待审核 </view>
                <view @click="changeTab(1)" :class="tabType==1?'flex-1 active':'flex-1'"> 已通过 </view>
                <view @click="changeTab(3)" :class="tabType==3?'flex-1 active':'flex-1'"> 已拒绝 </view>
            </view>
        </uv-sticky>
        <view class="shenheCneter">
            <checkbox-group v-if="list.length!=0" @change="checkboxChange" >   
                 <view class="list out-shadow flex flex-align" v-for="(item,index) in list" :key="index">
                    <view v-if="item.register_auto == 2" class="left">
                        <checkbox :checked="item.checked" style="position:relative;top:0;right:0;transform:scale(0.7);z-index: 111;opacity: 0;" :value="item.id+''" color="#FFCC33" />
                        <uni-icons style="position:absolute;top:0;left:0;" :type="item.checked?'checkbox-filled':'circle'" size="26" :color="item.checked?'#007aff':'#999'"></uni-icons>
                    </view>
                    <view class="right">
                        <view class="liveLogItemLeft flex flex-align">
                            <view class="liveLogItemLeftImg">
                                <image :src="item?.headimg" />
                            </view>
                            <view class="liveLogItemLeftInfo">
                                <view class="liveLogItemLeftInfoName"> {{ item?.nickname }} </view>
                                <view class="liveLogItemLeftInfoID">用户ID：{{ item?.id }} </view> 
                            </view>
                        </view>
                        <view class="liveLogItemRight">
                           {{ item.register_auto === 1 ? '申请加入您的团队，您已审核通过' : item.register_auto === 2 ? '申请加入您的团队，等待审核' : '申请加入您的团队，您已审核拒绝' }}
                        </view>
                        <view v-if="item.register_auto == 2" class="liveLogItemBtn flex flex-align flex-end">
                           <button class="btn1 btn black-liner" @click="handleRefuse(item,3)">审核拒绝</button>
                           <button class="btn2 btn blue-linear" @click="handleRefuse(item,1)">审核通过</button>
                        </view>
                         <view v-if="item.register_auto == 3" class="liveLogItemBtn flex flex-align flex-end">
                           <button class="btn2 btn blue-linear" @click="handleRefuse(item,1)">重新审核</button>
                        </view>
                    </view>
                    <view class="status">
                        <view v-if="item.register_auto == 1" class="status1">已通过</view>
                        <view v-else-if="item.register_auto == 2" class="status2">待审核</view>
                        <view v-else class="status3">已拒绝</view>
                    </view>
                </view>
            </checkbox-group>
            <view v-else class="noData" style="padding-top: 10vh;">
                <image src="/static/nodata/nodata02.png" />
                <view class="noDataText">暂无数据</view>
            </view>
        </view>
        <view v-if="tabType == 2" style="height: 120rpx;"></view>
        <view v-if="tabType == 2" class="footer flex flex-align flex-bt">
                <view class="left flex flex-align" @click="handleAllChange">
                   <uni-icons :type="allChecked?'checkbox-filled':'circle'" size="26" :color="allChecked?'#007aff':'#999'"></uni-icons> 全选
                </view>
                <view class="right flex flex-align">
                    <view>已选 {{ checkedList.length }} 人</view>
                    <view class="liveLogItemBtn flex flex-align flex-end">
                        <button class="btn1 btn black-liner" @click="allHandleRefuse(3)">审核拒绝</button>
                        <button class="btn2 btn blue-linear" @click="allHandleRefuse(1)">审核通过</button>
                    </view>
                </view>
            </view>
    </view>
</template>
<script setup lang="ts">
import { useInfiniteLoad } from '@/hooks/useInfiniteScroll'
import { onLoad, onReachBottom } from '@dcloudio/uni-app'
import { ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import API_CENTER from '@/api/teamcenter'
import { confirmDialog, toast } from '@/utils'
const router = useRouter()
const tabType = ref(2)
const allChecked = ref(false)
const checkedList = ref<any>([])
const offsetTop = ref<Number>(0)
// 条件编译
// #ifdef H5
offsetTop.value = -44
// #endif
// #ifdef MP-WEIXIN
offsetTop.value = 0
// #endif
onLoad((e: any) => {
    tabType.value = Number(e.type)
    params.register_auto = Number(e.type)
    loadMore()
})
watch(()=>checkedList.value,(newVal)=>{
    allChecked.value = newVal.length == list.value.length
    if(newVal.length == 0){
        allChecked.value = false
    }
})
const changeTab = (index: number) => {
    tabType.value = index
    checkedList.value = []
    allChecked.value = false
    params.register_auto = index
    reset()
    loadMore()
}
const checkboxChange = (e: any) => {
    checkedList.value = e.detail.value
    list.value.forEach((item: any) => {
        item.checked = checkedList.value.includes(item.id + '')
    })
}
const handleAllChange = (e: any) => {
    allChecked.value = !allChecked.value
    if (allChecked.value) {
        list.value.forEach((item: any) => {
            item.checked = true
        })
        checkedList.value = list.value.map((item: any) => item.id)
    } else {
        list.value.forEach((item: any) => {
            item.checked = false
        })
        checkedList.value = []
    }
}
const { list, isLoading, hasMore, loadMore, reset, params } = useInfiniteLoad(API_CENTER.getAuditList, {
    initialParams: {},
    transformResponse: (response:any) => {
        return response.list || [];
    }
});

const handleRefuse = (item: any, type: number) => {
    confirmDialog('提示', '确定要' + (type === 1 ? '通过' : '拒绝') + '审核吗？').then((res) => {
        console.log(res)
        if (res) {
            API_CENTER.auditPass({
                id: item.id,register_auto:type
            }).then((dd) => {
                toast('操作成功')
                setTimeout(() => {
                    reset()
                    loadMore()
                }, 1000)
            })
        }

    })
}

const allHandleRefuse = (type: number) => {
    confirmDialog('提示', '确定要批量' + (type === 1 ? '通过' : '拒绝') + '审核吗？').then((res) => {
        console.log(res)
        if (res) {
            const ids = checkedList.value.join(',');
            API_CENTER.batchAudit({
                ids:ids,register_auto:type
            }).then((dd) => {
                toast('操作成功')
                setTimeout(() => {
                    reset()
                    loadMore()
                }, 1000)
            })
        }

    })
}


onReachBottom(() => {
    // 还有更多数据且不在加载中时，加载更多
    if (hasMore.value && !isLoading.value) {
        loadMore()
    }
})
</script>
<style scoped lang="scss">
.shenheHeader {
    background-color: #fff;
    view {
        font-size: 28rpx;
        font-weight: bold;
        padding: 20rpx 0;
        margin: 0 20rpx;color: #969799;
        text-align: center;
        border-bottom: 6rpx solid #fff;
    }
    view.active {
        color: #007AFF;
        border-bottom: 6rpx solid #007AFF;
    }
}
.shenheCneter{
    padding: 30rpx;
    .list{
        margin-bottom: 20rpx;background-color: #fff;
        padding:30rpx 20rpx; border-radius: 30rpx;position: relative;
        .left{
            margin-right: 10rpx;position: relative;
        }
        .right{
            flex: 1;
            .liveLogItemLeft{
                margin-bottom: 20rpx;
                .liveLogItemLeftImg{
                    image{
                        width: 80rpx;
                        height: 80rpx;
                        border-radius: 50%;margin-right: 20rpx;
                    }
                }
                .liveLogItemLeftInfo{
                    .liveLogItemLeftInfoName{
                        font-size: 28rpx;
                        font-weight: bold;
                    }
                    .liveLogItemLeftInfoID{
                        font-size: 24rpx;
                        color: #999;
                    }
                }
            }
            .liveLogItemRight{
                font-size: 24rpx;
                color: #323233;
                font-weight: bold;background: #F6F6F6;border-radius: 20rpx;padding: 20rpx 30rpx;
            }
        }
    }
}
.liveLogItemBtn{
    margin-top: 30rpx;
    .btn{
        height: 74rpx;
        line-height: 74rpx;margin: 0;width: auto;padding: 0 30rpx;font-size: 26rpx;
    }
    .btn1{
        margin-right: 20rpx;
    }
}
.footer{
    padding:0rpx 30rpx;position: fixed;bottom: 0;left: 0;right: 0;width: 100%;background: #fff;box-sizing: border-box;
    height: 120rpx;z-index: 999;
    .liveLogItemBtn{
        margin-top: 0%;margin-left: 20rpx;
    }
    .left{color: #969799;}
}
.status{position: absolute;top: 0;right: 0;font-size: 24rpx;background:#D4E3FF ;color: #3C7CFF;padding: 6rpx 20rpx;border-radius: 0 30rpx 0 30rpx;font-weight: bold;

}
</style>
